<template>
    <div class="app-container">
        <!-- head -->
        <mt-header fixed title="Vue上手项目">
            <router-link to="" slot="left" v-if="$route.path !== '/home'">
                <mt-button icon="back" @click.native="$router.back(-1)">返回</mt-button>
            </router-link>
        </mt-header>
        <!-- router-view -->
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
        <!-- router-link -->
        <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item-1" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item-1" to="/member">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item-1" to="/shopcar">
				<!-- <span class="mui-icon mui-icon-gouwuche">&#xe601;<span class="mui-badge">9</span></span> -->
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge" id="badge">{{ this.$store.getters.getCarNum }}</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item-1" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
    </div>
</template>

<script>
    export default {
        data: function(){
            return {}
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .mint-header{z-index: 99;}
    .mui-bar-tab .mui-tab-item-1.mui-active {
        color: #007aff;
    }
    .mui-bar-tab .mui-tab-item-1{
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
    }
    .mui-bar-tab .mui-tab-item-1 .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .mui-bar-tab .mui-tab-item-1 .mui-icon~.mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .app-container{
        padding-top: 40px;
        padding-bottom: 50px;
    }
    .title{
        margin: 20px 15px 10px;
        color: #6d6d72;
        font-size: 15px;
    }
			
    .oa-contact-cell.mui-table .mui-table-cell {
        padding: 11px 0;
        vertical-align: middle;
    }
    
    .oa-contact-cell {
        position: relative;
        margin: -11px 0;
    }

    .oa-contact-avatar {
        width: 75px;
    }
    .oa-contact-avatar img {
        border-radius: 50%;
    }
    .oa-contact-content {
        width: 100%;
    }
    .oa-contact-name {
        margin-right: 20px;
    }
    .oa-contact-name, oa-contact-position {
        float: left;
    }


    @font-face {
        font-family: "iconfont";
        src: url('lib/iconfont/iconfont.eot'); /* IE9 */
        src: url('lib/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAACBwAAANfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDdIMyATYCJAMMCwgABCAFhG0HRRsHBxEVnAHIvsK4hQcgVQSj2oLajGuTE+DxfjyIBAhIAAAAAIB4eNrf/689M+e8eWL696UPJShBmUxSZ4VKcglCKGB0CWfy2s1KA2xTqXjhvQ7ov7W0BtbZRHaltd3SnJbgtkhUKD06Fanm/lG4/zktqHbAstsJE5RDVugD9yH08y6Xgaqa0zMWUBL4dSYSZurOLM7/9z/HTJcFmH+lA9mbWmRYlw4HOB4nWNdVAx7YHdgB6Q1jN1EexHUCA2YtFZu37h81qgLMC8TZUzJo1JRDqakOVWhLtpaI+xo13UjHuMd/P/5bFpCkycDSbcc34sb6X81fOV/vqkMUQTmeD9ouMpaiEEdKA/vkMLVUNuAYSn1xqwhprGg3XOGa2pX+4yWiBQxDInZhOvErsB43ZjEt4fy30qLiCV4Cpim5qCjjZIP8FxHp1vK51uV42ndt/X7/IfMx7tbsOFD3ZA0Tdo+2XX8kCe3JtXHv7clA68E0geJTga33MnYXdZufSh/n40nHEuSUDM73dG/RfnRCP3he8MdWCYa8Yb0dMNU6fMqRFpXf4ldv1zHn72Nd67x76fc4eNWaNTTbHJu2oJsyGP8mJCsHjLjebA3QN0InpjoXi5aZAqu3F7wOlq4xQPbvm+QPEZhWGYZMWdtgml6i2spH7Dh6/6IXAnfX/VkOQTVmDV3HZ9Pm+QuDowTDfp3IOjNKa18+E/AWM9lavbsedgxd3fNL3kxH/sr/47bByw9ux41aXutgAV8uXX7msvY+BdQuRL3fYPD/+hVYF0VXA3sutqzGVNqmZXsMvChhwAA6MTLhZ3/TtFtJqKZjSPr0IKvmIgt2KTQGrYBWFVsHA5bY2j1oEmmL0o/FLgUIY64gGfEMsjEPyIL9hMaMf2iNRRsG7InJIwfND93dRBgwxhBegI5MIZCbu0H1Aco6Cyip5swTpEpHwbPdbHYLC6QxVlSn0mcWIMjksCncDLPMQEkmwYhtxVzOOo4o+yI7MnmjaxOCAgzFQOgC0CJGQdD2rJv7+QNIqmUCVNPUET+BSEUPDzw2twVyy1C0arqW0ZVTko8xIc8SiJEDm6IPZTBlgLJ8UgJFmE31SJRmOVIr0dZgz2/Kn28HDAB3y5EiRzF0wtRndaQwNYVMFOVB4TUaAA==') format('woff2'),
        url('lib/iconfont/iconfont.woff?t=1565219792099') format('woff'),
        url('lib/iconfont/iconfont.ttf?t=1565219792099') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('lib/iconfont/iconfont.svg?t=1565219792099#iconfont') format('svg'); /* iOS 4.1- */
    }

    .mui-icon-gouwuche {
        font-family: "iconfont" !important;
        font-size: 24px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    //动画效果
    .v-enter{
        opacity: 0;
        transform: translateX(100%);
    }
    .v-leave-to{
        opacity: 0;
        transform: translateX(-100%);
    }
    .v-active, .v-leave-active{
        transition: all 1s ease;
    }
</style>
